const 画布 = document.querySelector('.画布');
const 宽度 = 画布.width = window.innerWidth;
const 高度 = 画布.height = window.innerHeight;
const 渲染器 = 画布.getContext('2d');

渲染器.fillStyle = 'rgb(0, 0, 0)';
渲染器.fillRect(0, 0, 宽度, 高度);


// 移动画布的原点
渲染器.translate(宽度/2, 高度/2);

function 度转弧度(度) {
    return 度 * Math.PI / 180;
}

function 随机数(最小, 最大) {
    return Math.floor(Math.random() * (最大 - 最小 + 1)) + 最小;
}


let 长度 = 150;
let 步长 = 20;

for (let i=0; i<长度; i++) {
    渲染器.fillStyle = 
        `rgba(${随机数(0, 255)}, 0, ${随机数(0, 255)}, 0.9)`;
    渲染器.beginPath();
    渲染器.moveTo(步长, 步长);
    渲染器.lineTo(步长+长度, 步长);
    const 三角形高度 = 长度 / 2 * Math.tan(度转弧度(60));
    渲染器.lineTo(步长 + 长度/2, 步长 + 三角形高度);
    渲染器.lineTo(步长, 步长);
    渲染器.fill();

    长度--;
    步长 += 0.7;
    渲染器.rotate(度转弧度(5));
}